<template>
  <!-- 学生 查看详情dialog -->
  <el-drawer
    :with-header="false"
    :title="usualType == 1 ? '课堂表现' : usualType == 3 ? '纪律' : '其他'"
    :visible="showDrawer"
    size="700px"
    direction="rtl"
    :before-close="drawer_handleClose"
  >
    <div class="drawer-title">
      {{ usualType == 1 ? '课堂表现' : usualType == 3 ? '纪律' : '其他' }}
    </div>
    <div class="drawer-content">
      <div class="flexBet drawer-cards">
        <!-- 学生信息 -->
        <div class="drawer-card">
          <div class="drawer-card-title flex">
            <div></div>
            信息
          </div>
          <div class="drawer-studentInfo-contian">
            <div class="drawer-studentInfo-contian-item flex">
              <span>授课班级：</span>{{ row.className }}
            </div>
            <div class="drawer-studentInfo-contian-item flex">
              <span>课&nbsp;&nbsp;&nbsp;程：</span>{{ row.courseName }}
            </div>
          </div>
        </div>

        <!-- 得分 -->
        <div class="drawer-card">
          <div class="drawer-card-title flex">
            <div></div>
            得分
          </div>
          <div class="drawer-score">
            {{
              usualType == 1
                ? data.usualScore
                : usualType == 3
                  ? data.disciplineScore
                  : data.otherScore
            }}
          </div>
        </div>
      </div>

      <div class="flex drawer-chart rela">
        <div style="" class="chart" ref="chart"></div>
        <div class="chartsTip absolute">
          <el-radio-group
            size="medium"
            v-model="drawer_dataType"
            @input="drawer_radioGroupChange"
            style="margin-bottom: 30px"
          >
            <el-radio-button label="1">日</el-radio-button>
            <el-radio-button label="2">周</el-radio-button>
            <el-radio-button label="3">月</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="drawer-table">
        <div class="data_table">
          <el-table
            border
            v-loading="loading"
            :data="drawer_scoreRecordList"
            height="calc(100vh - 160px)"
          >
            <el-table-column
              show-overflow-tooltip
              label="打分"
              align="center"
              prop="score"
            >
              <template slot-scope="scope">
                {{
                  scope.row.score > 0 ? '+' + scope.row.score : scope.row.score
                }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="打分教师"
              align="center"
              prop="teacherName"
            >
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              sortable
              label="打分时间"
              align="center"
              prop="operateTime"
            >
              <template slot-scope="scope">
                {{ parseTime(scope.row.operateTime) }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="打分备注"
              align="center"
              prop="remark"
            >
              <template slot-scope="scope">
                {{ scope.row.remark ? scope.row.remark : '--' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="search_bar flexEnd" style="padding: 10px 20px 0 0">
      <div class="normalBtn w88" @click="drawer_handleClose()">关 闭</div>
    </div>
  </el-drawer>
</template>

<script>
import { getCourseSchedulingInfo } from '@/api/teach/teach'
import {
  detailusuallyPoints,
  usualScorelineChart
} from '@/api/tea_studentGrade/usual'
import * as echarts from 'echarts'

export default {
  props: {
    showDrawer: Boolean,
    usualType: [String, Number],
    row: Object,
    courseStuId: ''
  },
  data() {
    return {
      data: {},
      drawer_dataType: 1,
      loading: false,
      drawer_scoreRecordList: []
    }
  },
  watch: {
    showDrawer(e) {
      if (e) {
        this.getDrawerList()
        this.$nextTick(() => {
          this.setOptionCdn()
        })
      }
    }
  },
  methods: {
    drawer_handleClose() {
      this.$emit('update:showDrawer', false)
    },
    // 抽屉-图标 周月日
    drawer_radioGroupChange(e) {
      console.log(e)
      this.setOptionCdn()
    },
    // 抽屉-获取打分记录
    async getDrawerList() {
      this.loading = true
      try {
        let res = await detailusuallyPoints(this.courseStuId, {
          type: this.usualType
        })
        const { code, data } = res
        if (code == 200) {
          this.data = data
          this.drawer_scoreRecordList = data.list
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    // 抽屉-图表生成
    async setOptionCdn() {
      try {
        // 获取初始分
        let scoreRes = await getCourseSchedulingInfo(
          this.$route.query.courseSchedulingId
        )
        let res = await usualScorelineChart(
          {
            type: this.usualType,
            dateType: this.drawer_dataType
          },
          this.courseStuId
        )
        if (res.code == 200 && scoreRes.code == 200) {
          let initScores = []
          res.data.classScorelineChart.map(() => {
            initScores.push(
              this.usualType == 1
                ? scoreRes.data.initialUsualScore
                : this.usualType == 3
                  ? scoreRes.data.initialDisciplineScore
                  : scoreRes.data.initialOtherScore
            )
          })
          let myChart = echarts.init(this.$refs.chart)
          let option
          option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: {
              icon: 'path://M10,20 a 10,10 0 0 1 10,-10 h 30 a 10,10 0 0 1 10,10 v 30 a 10,10 0 0 1 -10,10 h -30 a 10,10 0 0 1 -10,-10 z',
              itemWidth: 14, // 正方形宽度
              itemHeight: 14, // 正方形高度,
              data: ['班级平均分', '我的得分', '初始分']
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            grid: {
              left: '3%',
              right: '8%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: res.data.classScorelineChart.map((item) => {
                  if (this.drawer_dataType == 1 || this.drawer_dataType == 2) {
                    return item.date.slice(5, item.date.length)
                  } else {
                    return item.date.slice(0, item.date.length - 3)
                  }
                }),
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  interval: 0
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '班级平均分',
                type: 'line',
                data: res.data.classScorelineChart.map((item) => {
                  return item.score
                }),
                smooth: true,
                lineStyle: {
                  color: '#62FBFF '
                },
                itemStyle: {
                  color: '#62FBFF ' // 图例项颜色，使用渐变的起始颜色
                }
              },
              {
                name: '我的得分',
                type: 'line',

                data: res.data.stuScorelineChart.map((item) => {
                  return item.score
                }),
                smooth: true,
                lineStyle: {
                  color: '#E92B97'
                },
                itemStyle: {
                  color: '#E92B97 ' // 图例项颜色，使用渐变的起始颜色
                }
              },
              {
                name: '初始分',
                type: 'line',
                data: initScores,
                smooth: true,
                lineStyle: {
                  color: '#4C71E4'
                },
                itemStyle: {
                  color: '#4C71E4 ' // 图例项颜色，使用渐变的起始颜色
                }
              }
            ]
          }
          option && myChart.setOption(option)
        }
      } finally {
      }
    }
  }
}
</script>

<style scoped lang="scss">
.w88 {
  width: 88px;
}

.w124 {
  width: 124px;
}

.drawer-table {
  margin-top: 44px;

  .data_table {
    margin-top: 16px;
  }
}

.drawer-chart {
  margin-left: 25px;
  margin-top: 38px;
  width: 597px;
  height: 218px;

  .chart {
    width: 597px;
    height: 218px;
  }

  .chartsTip {
    top: -4px;
    right: 0;
  }
}

.drawer-title {
  box-sizing: border-box;
  height: 70px;
  border-bottom: 1px solid #edeff0;
  padding-left: 32px;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  line-height: 70px;
  text-align: left;
  font-style: normal;
}

// 滚动条样式
/* 修改滚动条样式 .title_state为div盒子*/
// 火狐兼容
/* 火狐浏览器的滚动条样式 */
.drawer-content {
  scrollbar-width: thin; /* 可选值：auto | thin | none */
  scrollbar-color: #e1e1e1 white; /* 滚动条滑块颜色 滑轨颜色 */
}

.drawer-content::-webkit-scrollbar {
  width: 6px;
  overflow-y: scroll;
  overflow-x: auto;
}

.drawer-content::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border-radius: 4px;
}

.drawer-content::-webkit-scrollbar-track {
  background: white;
}

.drawer-content {
  height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 16px 20px 0 24px;

  .drawer-cards {
    .drawer-card {
      width: 320px;
      height: 160px;
      background-image: url("../../../assets/images/scoreBg.png");
      background-size: 320px 160px;
      border-radius: 8px;
      box-sizing: border-box;

      .drawer-card-title {
        padding: 15px 0 0 8px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 20px;
        text-align: left;
        font-style: normal;

        div {
          margin-right: 10px;
          width: 6px;
          height: 20px;
          background: #28b28b;
          border-radius: 1px;
        }
      }

      .drawer-studentInfo-contian {
        margin: 20px 0 0 25px;

        .drawer-studentInfo-contian-item {
          margin-bottom: 16px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
          line-height: 22px;
          font-style: normal;

          span {
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 16px;
            color: #788295;
            line-height: 22px;
            font-style: normal;
          }
        }
      }

      .drawer-score {
        padding: 0 0 0 0;
        text-align: center;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 72px;
        color: #28b28b;
        line-height: 100px;
        font-style: normal;
      }
    }
  }
}

.greenText {
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #28b28b;
  text-align: left;
  font-style: normal;
}

.tables {
  padding: 16px 24px;
  width: 100%;
}

.exportbtn {
  display: flex;
  justify-content: space-between;

  margin: 10px 0;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  -webkit-appearance: none;
  background-color: #fff;
  /* 滚动条背景颜色 */
  height: 8px;
  /* 滚动条高度 */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #bfbfbf;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #fff;
}
</style>
